// 付款申请单
/* eslint-disable */
<template>
  <div class="formWrapper">
    <el-card class="box-card marginbottom10px">
      <div slot="header" class="clearfix">
        <span>付款申请单——基本信息</span>
      </div>
      <div class="text item">
        <el-form :inline="true" label-position="right" label-width="8vw" :model="basicInfo">
          <el-form-item label="申请人：">
            <el-input clearable size="medium" v-model="basicInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="部门：">
            <el-autocomplete
              class="inline-input"
              v-model="basicInfo.sector"
              :fetch-suggestions="querySearch"
              size="medium"
              clearable
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="合同号：">
            <el-input clearable size="medium" v-model.number="basicInfo.contractNumber"></el-input>
          </el-form-item>
          <el-form-item label="附件张数：">
            <el-input clearable size="medium" @keyup.native="onlyNum" v-model="basicInfo.accessoryQuantity"></el-input>
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-input clearable size="medium" v-model="basicInfo.projectName"></el-input>
          </el-form-item>
          <el-form-item label="是否有预算：">
            <el-radio-group v-model="basicInfo.isBudget" size="medium">
              <el-radio-button label="true" >是</el-radio-button>
              <el-radio-button label="false">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="收款单位：">
            <el-input clearable size="medium" v-model="basicInfo.proceedCompany"></el-input>
          </el-form-item>
          <el-form-item label="开户行账号：">
            <el-input clearable size="medium" v-model="basicInfo.depositAccount"></el-input>
          </el-form-item>
          <el-form-item label="用款说明：">
            <el-input clearable size="medium" v-model="basicInfo.desc"></el-input>
          </el-form-item>
          <el-form-item label="支付方式：">
            <el-select v-model="basicInfo.paymentMode" size="medium" placeholder="请选择">
              <el-option
                v-for="item in paymentModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款金额：">
            <el-input clearable size="medium" v-model="basicInfo.paymentAmount"></el-input>
          </el-form-item>
          <el-form-item label="大写：">
            <span>
              {{paymentChinese.baiwan}} 佰
              {{paymentChinese.shiwan}} 拾
              {{paymentChinese.wan}} 万
              {{paymentChinese.qian}} 仟
              {{paymentChinese.bai}} 佰
              {{paymentChinese.shi}} 拾
              {{paymentChinese.yuan}} 元
              {{paymentChinese.jiao}} 角
              {{paymentChinese.fen}} 分
            </span>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="btnBox">
      <el-popover
        placement="top-start"
        trigger="hover"
        content="保存至草稿箱">
        <el-button round slot="reference">保存</el-button>
      </el-popover>
      <el-button round @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PaymentRequestForm',
    data () {
      return {
        basicInfo: {
          name: '',
          sector: '',
          contractNumber: '',
          accessoryQuantity: '',
          projectName: '',
          isBudget: '',
          proceedCompany: '',
          depositAccount: '',
          desc: '',
          paymentMode: '',
          paymentAmount: ''
        },
        sectorSuggestions: [],
        tableData: [],
        paymentModeOptions: [
          {
            value : '1',
            label : '支票'
          }, {
            value : '2',
            label : '电汇'
          }, {
            value : '3',
            label : '承兑支票'
          }, {
            value : '4',
            label : '其他'
          },
        ]
      }
    },
    methods: {
      querySearch (queryString, cb) {
        let sectorSuggestions = this.sectorSuggestions
        let results = queryString ? sectorSuggestions.filter(this.createFilter(queryString)) : sectorSuggestions
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      loadAll () {
        return [
          {'value': '策略网联部', 'address': '123'},
          {'value': '营销部', 'address': '123'},
          {'value': '生产车间', 'address': '123'}
        ]
      },
      handleSubmit () {
        console.log(this.basicInfo)
        console.log(this.travelDetail)
      },
      numberToChinese (num) {
        switch (num) {
          case 1 : {
            return '壹'
            break
          }
          case 2 : {
            return '贰'
            break
          }
          case 3 : {
            return '叁'
            break
          }
          case 4 : {
            return '肆'
            break
          }case 5 : {
            return '伍'
            break
          }
          case 6 : {
            return '陆'
            break
          }case 7 : {
            return '柒'
            break
          }
          case 8 : {
            return '捌'
            break
          }
          case 9 : {
            return '玖'
            break
          }
          case 0 : {
            return '零'
            break
          }
          default : {
            return ' '
            break
          }
        }
      },
      onlyNum () {
        console.log(1)
      }
    },
    mounted () {
      this.sectorSuggestions = this.loadAll()
    },
    computed: {
      deductTab () {
        return this.$store.state.deductTab
      },
      paymentChinese () {
        let num = this.basicInfo.paymentAmount
        let paymentChinese = {
          fen: this.numberToChinese(Math.floor(num * 100 % 10)),
          jiao: this.numberToChinese(Math.floor(num * 10) % 10),
          yuan: this.numberToChinese(Math.floor(num) % 10),
          shi: this.numberToChinese(Math.floor(num / 10 % 10)),
          bai: this.numberToChinese(Math.floor(num / 100 % 10)),
          qian: this.numberToChinese(Math.floor(num / 1000 % 10)),
          wan: this.numberToChinese(Math.floor(num / 10000 % 10)),
          shiwan: this.numberToChinese(Math.floor(num / 100000 % 10)),
          baiwan: this.numberToChinese(Math.floor(num / 1000000 % 10))
        }
        return paymentChinese
      }
    },
    watch: {
      // 关闭标签时清空该页的数据
      deductTab (val) {
        if (val === 'ExpenseReimbursementForm') {
          for (let key in this.basicInfo) {
            this.basicInfo[key] = ''
          }
          for (let i = 0; i < this.travelDetail.length; i++) {
            for (let key in this.travelDetail[i]) {
              this.travelDetail[i][key] = ''
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
  .text>div{
    margin-bottom: 5px;
  }
  .marginright10px{
    margin-right:10px;
  }
  .marginbottom10px{
    margin-bottom: 10px;
  }
  .formTable{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
  }
  table,table tr th, table tr td {
    border:1px solid #ccc;
    text-align: center;
    line-height: 200%;
  }
  .bordernone{
    width: 100%;
  }
  .bordernone >>> .el-input__inner{
    border:none;
    text-align: center;
  }
  .btnBox{
    margin-top: 10px;
    text-align: right;
  }
  .formWrapper >>> .el-form-item{
    margin-bottom: 10px;
  }
  .formWrapper >>> .el-card__body{
    padding: 5px;
  }
  .formWrapper >>> .el-card__header{
    padding: 8px 20px;
  }
</style>

